<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>vuestudy</title>
    <meta name="author" content="vuestudy"/>
    <meta name="description" content="vuestudy"/>
    <meta name="keywords" content="vuestudy"/>
    <meta name="Resource-type" content="Document"/>
	
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css"  />

</head>
<body>
<div id="myApp">
 
	<div>请输入您的名字：<input v-model="helloname"></div>
    <hr/>
    <say-hello :sayname="helloname" />
	

	<h1>身世之谜</h1>
    <show-member-info sname="koma" :sage="25" :sdetail="{address:'earth', language:'世界语'}"></show-member-info>

</div>


<script type="text/javascript">

/* 组件定义: game-item */
	Vue.component('say-hello', {
        props: { 
			sayname: {
                type: String,
                required: true,
            },
			},
        template: '<div>你好,<strong>{{sayname}}</strong>！</div>',
    });
	
	
	Vue.component('show-member-info', {
        props: {
            sname: {
                type: String,
                required: true,
            },
            sage: {
                type: Number,
                validator: function (value) {
                    return value >= 0 && value <= 130;
                },                
            },
            sdetail: {
                type: Object,
                default: function() {
                    return {
                        address: 'US',
                        language: 'English',
                    };
                },
            },
        },
        template: '<div>姓名：{{this.sname}}<br/>' 
            + '年龄：{{this.sage}}岁<br/>'
            + '地址：{{this.sdetail.address}}<br/>'
            + '语言：{{this.sdetail.language}} </div>',
    });
	

	
	
	/* Vue对象实例化 */
	var myApp = new Vue({
		el: '#myApp',
		data: {
		    helloname: '123',
			},
	});
</script>
</body>
</html>